<template>
	<div class="shopcar-container">
		<div class="shop-list">
			<div class="mui-card" v-for="(item,index) in list">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="$store.getters.getSelected[item.id]" @change="selectedChange($store.getters.getSelected[item.id],item.id)"></mt-switch>
						<img :src="item.thumb_path" />
						<div class="info">
							<h1>{{item.title}}</h1>
							<p>
								<span class="price">￥{{item.sell_price}}</span>
								<numbox :val="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
								<button class="btn mui-btn-link" @click.prevent="remove(index,item.id)">删除</button>
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
							<p>总计(不含运费)</p>
							<p>已勾选 <span class="red">{{$store.getters.getAllSum.count}}</span> 件 , 总价 <span class="red">￥{{$store.getters.getAllSum.price}}</span></p>
						</div>
						<mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import numbox from '../subComponents/shopcar_numbox.vue'
	export default{
		data(){
			return{
				list:[]
			}
		},
		created(){
			this.getGoodsList()
		},
		methods:{
			getGoodsList(){
				//先获取store中所有商品的id
				var idArr=[];
				this.$store.state.car.forEach(item=>idArr.push(item.id));
				
				if(idArr.length<=0){
					return
				}
				this.$http.get('api/goods/getshopcarlist/'+idArr.join(',')).then(res=>{
					console.log(res.body.message);
					this.list=res.body.message
				})
			},
			remove(index,id){
				this.list.splice(index,1);
				this.$store.commit('removeFormCar',id)
			},
			selectedChange(val,id){
				console.log(val,id)
				this.$store.commit('updataSelected',{id:id,selected:val})
			}
		},
		components:{
			numbox
		}
	}
</script>

<style scoped>
	.jiesuan{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.red{
		color: red;
		font-size: 16px;
		font-weight: 700;
	}
	.shopcar-container{
		background-color: #eee;
		overflow: hidden;
     }
	 .mui-card-content-inner{
		 display: flex;
		 align-items: center;
	 }
     .mui-card-content-inner img{
		 width: 60px;
		 height: 60px;
	 }
	 .mui-card-content-inner h1{
		 font-size: 13px;
	 }
	 .mui-card-content-inner .info{
		 display: flex;
		 flex-direction: column;
	 }
	 .mui-card-content-inner .info p{
		 margin-bottom: 0;
		 margin-top: 6px;
		 display: flex;
		 align-items: center;
	 }
	 .mui-card-content-inner .price{
		 color: red;
		 font-weight: 700;
	 }
</style>
